<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			.father{
			width: 1500px;
			height: 700px;
			margin: 0 auto;
			border: 1px solid black;
			}
			img{
			height: 700px;
			float: left;
		position: absolute;
			top: 0px;
				width: 500px;
			left: 18px;
					}
			#result{
			width: 400px;
			height: 100px;
					}
		.t1{
			width: 1000px;
			height: 200px;
			position: relative;
			left: 500px;
					}
		.t2{
			width: 1000px;
			height: 500px;
			position: absolute;
			top: 200px;
			left: 520px;
					}
		.t3{
			width: 157px;
					}
		</style>
		<script>
			var h;
			function price(pr){
			h=document.getElementById("yf").value=pr;
			}
			function sum(){
			var q1=document.getElementById("o1").value;
			var q2=document.getElementById("o2").value;
			var q3=document.getElementById("o3").value;
			var q4=document.getElementById("o4").value;
			document.getElementById("result").value="当前订单总额:"+((q1*q2)+(q3*q4)+(h))+"元";
			}
		</script>
	</head>
	<body>
		<div class="father"> 
					<table border="1" class="t1">
							<tr>
								<th>宝贝1单价</th>
								<th><input type="text" id="o1"/>元</th>
								<th>数量</th>
								<th><input type="text" id="o2"/>件</th>
							</tr>
							<tr>
								<th>宝贝2单价</th>
								<th><input type="text" id="o3"/>元</th>
								<th>数量</th>
								<th><input type="text" id="o4"/>件</th>
							</tr>
					</table>
				</div>
					<table border="1" class="t2">
						<tr>
							<th class="t3">运送方式</th>
							<th><input type="radio" name="one" id="yd" onclick="price(10)"/><label for="yd">韵达</label>&nbsp;&nbsp;
							<input type="radio" name="one" id="ems" onclick="price(20)"/><label for="yd">EMS</label>&nbsp;&nbsp;
							<input type="radio" name="one" id="sf" onclick="price(30)"/><label for="yd">顺丰</label></th>
						</tr>
						<tr>
							<th>运费</th>
							<th><input type="text" id="yf"/>元</th>
						</tr>
						<tr>
							<th><input type="button" onclick="sum()" value="我要确认订单"/></th>
							<th><input type="text" readonly="readonly" id="result"/></th>
						</tr>
					</table>
				<table border="1">
		<tr>
						<img src="img/购物车.jpg"/>
			</tr>
			</table>
	</body>
</html>
